<template>
	<view>
		<view class="box-top bg-white">
			<view class="user-data flex align-center padding">
				<view class="cu-avatar round lg margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
				<view class="box-right">
					<view class="recharge flex align-center justify-between margin-bottom-xs">
						<text class="text-bold text-lg text-black">{{ this.$store.getters.isLogin ?  this.$store.state.user.user_name : '游客'}}</text>
						<button class="cu-btn line-white shadow sm flex align-center" >
							<text class="cuIcon-roundaddfill"></text>
							<text>充值</text>
						</button>
					</view>
					<view class="flex align-center">
						<view class="margin-right-sm">
							<text class="cuIcon-recharge text-green margin-right-xs"></text>
							<text>0</text>
						</view>
						<view>
							<text class="cuIcon-vip text-green margin-right-xs"></text>
							<text>1</text>
						</view>
					</view>
				</view>
			</view>
			<view class="record-box">
				<image class="bg-img" src="../../static/images/mine-record.png"></image>
				<view class="record-box-data">
					<view class="flex-sub text-center" v-for="(item,index) in mineArray" @tap="navigateTo(item.page)">
						<view class="margin-bottom-xs text-xl text-bold">{{item.badge}}</view>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="cu-list grid col-3 no-border margin-top" >
				<view class="cu-item" v-for="(item,index) in cuIconListFilter" :key="index" @tap="navigateTo(item.page)">
					<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu sm-border margin-top">
			<view class="cu-item arrow">
				<button class="cu-btn content" open-type="contact" @tap="suspend">
					<text class="cuIcon-edit text-gray"></text>
					<text class="text-black">在线反馈</text>
				</button>
			</view>
			<view class="cu-item arrow">
				<button class="cu-btn content" open-type="contact" @tap="suspend">
					<text class="cuIcon-question text-gray"></text>
					<text class="text-black">帮助中心</text>
				</button>
			</view>
		</view>
		<view class="box-bottom bg-white padding margin-top">
			<view class="box-bottom-title margin-bottom-sm">
				<text class="cuIcon-titles text-orange"></text>
				<text class="text-xl text-bold">最新公告</text>
			</view>
			<view class="box-bottom-content">
				<view class="flex align-center justify-between text-gray margin-bottom-sm"  v-for="(item,index ) in textArray " >
					<view class="box-bottom-content-data">{{item.text}}</view>
					<text class="box-bottom-content-time">{{item.time}}</text>
				</view>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button v-if="this.$store.getters.isLogin" class="cu-btn bg-white text-black lg" @tap="logout">退出登陆</button>
			<button v-if="!this.$store.getters.isLogin" class="cu-btn bg-white text-black lg" @tap="navigateTo('/pages/login/login')">去登陆</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			    textArray : [{
					text : '猫头鹰系统v1.0.0上线了',
					time : '2020-08-12'
				}],
				gridCol: 3,
				mineArray : [{
					cuIcon: 'attentionfill',
					color: 'cyan',
					badge: 0,
					name: '我的浏览',
					page: '/pages/mine/myoperating'
				},  {
					cuIcon: 'likefill',
					color: 'blue',
					badge: 0,
					name: '我的收藏',
					page: '/pages/mine/myCollect'
				},{
					cuIcon: 'formfill',
					color: 'mauve',
					badge: 0,
					name: '购买记录',
					page: '/pages/mine/mydownload'
				}],
				
				// 
				cuIconList: [{
					cuIcon: 'homefill',
					color: 'red',
					badge: 0,
					name: '店铺注册',
					page: '/pages/mine/dianpu',
					quanxian : [0,1]
				}, {
					cuIcon: 'shopfill',
					color: 'orange',
					badge: 0,
					name: '入驻店铺',
					page: '/pages/mine/ruzhu',
					quanxian : [0,1]
				}, {
					cuIcon: 'camerafill',
					color: 'yellow',
					badge: 0,
					name: '添加素材',
					page: '/pages/mine/material',
					quanxian : [1],
					// pages/statistics/statistics
				}, {
					cuIcon: 'camerafill',
					color: 'yellow',
					badge: 0,
					name: '报表统计',
					page: '/pages/statistics/statistics',
					quanxian : [1],
				}, {
					cuIcon: 'album',
					color: 'olive',
					badge: 0,
					name: '我的创作',
					page: '/pages/mine/mycreation',
					quanxian : [0,1]
				}, /* {
					cuIcon: 'down',
					color: 'purple',
					badge: 0,
					name: '我的下载',
					page: '/pages/mine/mydownload'
				},  {
					cuIcon: 'activityfill',
					color: 'purple',
					badge: 0,
					name: '店铺注册管理',
					page: '/pages/mine/registrationReview'
				}, {
					cuIcon: 'profilefill',
					color: 'mauve',
					badge: 0,
					name: '店铺成员管理',
					page: '/pages/mine/peopleReview'
				} */ ],
			};
		},
		computed:{
			cuIconListFilter(){
				return this.cuIconList.filter((res)=>{
					return res.quanxian.includes(this.$store.state.user.status);
				});
			}
		},
		async onLoad(){
			let userInfo = this.$store.state.user;
			this.mineArray  = await this.$httpWay.post('queryMyJilv',{"user_id":userInfo.id});
		},
		methods:{
			logout(){
				this.$store.commit('toLogin',  false);
			}
		}
	}
</script>

<style lang="scss">
	.box-bottom{
		
		&-content{
			width: 100%;
			background-color: #f5f9fb;
			height: 400upx;
			padding: 15upx;
			overflow-y: scroll;
			&-data{
				width: 70%;
			}
			&-time{
				text-align: right;
				width: 30%;
			}
		}
	}
	.box-top{
		.user-data{
			.box-right{
				width: 80%;
				.recharge{
					.cu-btn{
						border: 2upx solid #55b5e1;
						color: #55b5e1;
					}
				}
			}
			.cuIcon-roundaddfill{
				font-size: 27upx;
				margin:0 5upx 3upx 0;
			}
		}
		.record-box{
			position: relative;
			width: 92%;
			height: 130upx;
			margin: 10upx auto;
			.bg-img{
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 5upx;
			}
			&-data{
				position: absolute;
				z-index: 100;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #FFFFFF;
			}
		}
	}
</style>
